<template>
  <div class="page">
  <div class="start-page" v-if="status === 'start'">
    <div class="start-button" @click="startGame">开始</div>
  </div>
    <div class="result-page" v-if="status === 'result'">
      <div class="result-info">
        <div>时间：{{showTime}}s</div>
        <div>得分：{{showScore}}</div>
        <div  @click="startGame">再来一局</div>
      </div>
    </div>   
    <!-- 游戏界面 -->
     <div class="game-page" v-if="status === 'play'">
      <div class="time">{{ time }} s </div>
      <div class="score">{{ score }}</div>
      <div class="success-bg">
      <div>完成</div>

      <div class="block-list" :style="{bottom:bottom+'px'}"> 
        <div class="block-row" v-for="(row,i) in blocklist" :key="'row' + i">
          <div class="block-rcol" v-for="(col,y) in row" :key="'col' + y" @click="handleTouchBlock(i,col)">
            <div class="block-black" v-if="col.type === 'black'"></div>
          </div>
      </div>
    </div>
     </div>
  </div>
</div> 
</template>

<script>

export default {
  name: 'App',
  data(){
    return {
      rows:7,
      cols:6,
      blocklist:[],
      score:0,//得分
      time:"0.00",
      startTime:0,//开始时间
      timer:null,//定时器
      nowRow:999,//当前行
      status:"start",//游戏状态
      bottom:0,
      showTime:"0.00",
      showScore:0,
    }
  },
  mounted(){
    
  },
  unmounted(){
    clearInterval(this.timer)
  },
  methods:{
    startGametime(){
      this.startTime = Date.now()
      this.time = "0.00"
      this.timer = setInterval(() => {
        let now = Date.now()
        this.time = ((now - this.startTime)/1000).toFixed(2)
      },10) 
    },
    getRandomInt(n) {
    // Math.random() 会返回一个介于 0（包含）和 1（不包含）之间的随机小数
    // Math.random() * (n + 1) 会得到一个介于 0（包含）和 n + 1（不包含）之间的随机小数
    // Math.floor() 会将这个随机小数向下取整，得到一个介于 0 到 n 之间的整数
    return Math.floor(Math.random() * (n + 1));
},
    createBlockList(){
      console.log("create block")
      let list = []
      //外层行
      for (let i =0; i < this.rows; i++){
        console.log("out",i)
        let cols= []
        for (let y =0; y < this.cols; y++){
          console.log("in",y)
          let block = {
            type:"white",
            score:10
          }
          cols.push(block)
        }
        let index = this.getRandomInt(this.cols-1)
        console.log('index',index)
        cols[index].type = 'black'
        list.push(cols)
      }
      console.log("块数据",list)
      this.blocklist = list
      this.nowRow = this.rows
    },
    handleTouchBlock(row,block){
      console.log("点击行：",row,this.nowRow)
      console.log("点击列：",block)
      if(block.type !=='black'){
        this.gameEnd()
      }else{
        //只能点击最新的行
        if(this.nowRow - row === 1 ){
          this.score += block.score
          this.nowRow = row
          this.bottom -= 100
          //点击最后一行游戏结束
          if(row === 0){
            this.gameEnd()
          }
        }
      }
    },
    gameEnd(){
      console.log("游戏结束")
      clearInterval(this.timer)
      this.status = 'result'
      this.showTime = this.time
      this.showScore = this.score
    },
    startGame(){
      this.status = 'play'
      this.createBlockList()
    this.startGametime()
    this.bottom = 0
    this.score = 0
    this.time = '0.00'
    }
  }
 
}
</script>

<style>
body{
  margin: 0;
}
.page{
  background-color: black;
  height: 100vh;
  width: 100vw;
}
.start-button{
   background-color: white;
   width: 100px;
   height: 50px;
   text-align: center;
   line-height: 50px;
}
.start-page{
  height: 100vh;
  width: 100vw;
  display: flex;
  align-items: center;
  justify-content: center;
}
.result-page{
  height: 100vh;
  width: 100vw;
  display: flex;
  align-items: center;
  justify-content: center;
}
.result-info{
  background-color: white;
  width: 200px;
  height: 80px;
  text-align: center;

}
.game-page{
  height: 100vh;
  width: 100vw;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}
.time{
  position: fixed;
  left: 20px;
  top: 20px;
  color: white;
  font-size: 30px;
  z-index: 10086;
  text-shadow: 0 0 2px black;
}
.score{
  position: fixed;
  right: 20px;
  top: 20px;
  color: white;
  font-size: 30px;
  z-index: 10086;
  text-shadow: 0 0 2px black;
}
.success-bg{
  background-color: aquamarine;
  height: 100vh;
  width: 100vw;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.success-bg > div{
  text-align: center;
  font-size: 70px;
  font-weight: bolder;
}
.block-list{
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  transition: all 0.2s ease-in-out;
}
.block-row{
  display: flex;
  width: 100%;
}
.block-rcol{
  flex: 1;
  height: 100px;
  background-color: white;
  border: 1px solid black;
  box-sizing: border-box;

}
.block-black{
  background-color: black;
  width: 100%;
  height: 100%;
}
</style>
